@()(implicit session: Session)
@config.main("Expression") {

    <div class="body-box">
        <div class="page-box">

            @config.subTitle("Expression" )

            <div class="main-body">

                <form class="form-horizontal col-sm-12 my-form" method="get" id="form">



                    <div class="col-sm-12 form-group my-position">
                        <label class="col-sm-2 my-position-title">Group 1 :</label>
                        <div class="col-sm-7">
                            <select class="form-control" name="group1[]" id="group1" multiple  onchange="DisData(1)"></select>
                        </div>
                    </div>

                    <div class="col-sm-12 form-group my-position">
                        <label class="col-sm-2 my-position-title">Group 2 :</label>
                        <div class="col-sm-7">
                            <select class="form-control" name="group2[]" id="group2" multiple onchange="DisData(2)"></select>
                        </div>
                    </div>
                    <hr>
                    <div class="col-md-12 form-group">
                        <label class="col-sm-2"></label>
                        <button type="button" class="btn my-btn" style="width: 200px" onclick="Run()">
                            Run</button>

                    </div>
                </form>

                <div id="result" class="result" style="min-height: 800px">
                    <hr>

                    <h4 class="card-title" style="line-height: 30px;">Result:</h4>

                    @components.navUlComponents(Seq(("boxPlot", "Box plot", plotDiv("box")),
                        ("volPlot", "Volcano plot",  plotDiv("vol")),
                        ("heatPlot", "Heatmap Plot", plotDiv("heat")),
                        ("hClustPlot", "HClust Plot",  plotDiv("hclust"))), "boxPlot")

                </div>

            </div>
        </div>
    </div>

    <script src="@routes.Assets.versioned("Highcharts-9.0.1/highcharts.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/highcharts-more.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/modules/exporting.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/modules/heatmap.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("config/plotly.min.js")" type ="text/javascript"></script>

    <script>


        let samples = []
            let header =  "L1	L2	L3	L4	L8	L9	L10	L11	L12	L15	L16	L17	L18	L19	L20	L21	L22	L23	L24	L26	L27	L28	L29	L30	L31	L32	L39	L40	L42	L43	L44	L45	L46	L49	L52	L53	L54	L55	L56	L58	L59	L60	L61	L63	L64	L65	L66	L67	L69	L70	L71	L72	L73	L76	L77	L78	L81	L82	L86	L87	L88	L89	L90	L91	L94	L95	L96	L97	L98	L99	L100	L101	L102	L106	L119	L145	L150	L151	L152	L153	L155	L160	L161	L162	L163	L164	L165	L166	L167	L168	L170	L172	L173	L174	L175	L176	L177	L178	L180	L182	L185	L186	L212	L213	L214	L217	L219	L220	L222	L226	L227	L228	L229	L232	L233	L252	L297	L298	L299	L501	L504	L530	L531	L534	L536	L539	L540	L543	L545	L547	L548	L559	L561	L564	L3001	L3003	L3007	L3009	L3011	L3012	L3014	L3038	L164-1	L213-1	LbendiCK	LDe1	LFy1	LFy2	LFy5	LFy7	LFy9	Lgan1	Lgan12	Lgan2	Lgan3	Lgan4	Lgan5	Lgan9	Lganwu2	Lgui1	Lgui2	Lgui3	Lgui4	Lguiruan2	Lguiruan23	Lguiruan3	Ljiangxi23	Lmin43	Lmin48	Lmin60	Lminyou1	Lminyou10	Lminyou11	Lminyou2	Lminyou4	Lminyou43	Lminyou48	Lminyou5	Lminyou6	Lminyou60	Lminyou8	Lminyou9	Ltong10	Ltong11	Ltong12	Ltong18	Ltong29	Ltong3	Ltong30	Ltong32	Ltong38	Ltong39	Ltong4	Ltong40	Ltong41	Ltong6	Ltong9	Lwu	Lwu-1	Lwu5-1	Lwu5-2	Lwupai5	Lwuyiwu2	Lxiang3	Lxiang4	Lxiang47	Lxiang5	Lxiang50	Lxiang6	Lxiang7	Lxiang8	Lxiang9	Lyajia1	Lyajia2	Lyajia6	Lyajia8	Lyawu1	Lyawu2	Lyawu4	Lyawu6	Lyawu7".split("\t");

        $.each(header,(i,v)=>{
            samples.push(
                    {id:v,text:v}
            )
        })


            $(function (){
                $("#group1").select2({
                    placeholder:"Please select two samples.",
                    data:samples
                })

                $("#group2").select2({
                    placeholder:"Please select two samples.",
                    data:samples
                })

                formValidation()
            })

            function DisData(obj) {
                const len = 2;

                for (let i = 1; i <= len; i++) {
                    //处理其它的select
                    if (i !== obj) {
                        let sample = []
                        const GROUP_ID = "#group" + i

                        let selected = [];
                        //得到正在处理之外的select的选中值
                        for (let j = 1; j <= len; j++) {
                            if (j !== i) {
                                $.each($("#group" + j).find("option:selected"), (i, v) => {
                                    selected.push($(v).val())
                                })
                            }
                        }

                        let selectedSelf = [];
                        $.each($(GROUP_ID).find("option:selected"), (i, v) => {
                            selectedSelf.push($(v).val())
                        })
                        $.each(samples, (i, v) => {
                            if (selected.indexOf(v.id) !== -1) {
                                sample.push({
                                    "id": v.id,
                                    "text": v.text,
                                    "disabled": true
                                })
                            } else if (selectedSelf.indexOf(v.id) !== -1) {
                                sample.push({
                                    "id": v.id,
                                    "text": v.text,
                                    "selected": true
                                })
                            } else {
                                sample.push({
                                    "id": v.id,
                                    "text": v.text
                                })
                            }
                        })

                        console.log(GROUP_ID)
                        $(GROUP_ID).empty();
                        $(GROUP_ID).select2({
                            placeholder:"Please select two samples.",
                            data: sample
                        })
                    }
                }
            }

            function Run() {
                const index = MyTable.prototype.runningIcon();
                $.ajax({
                    url: "@routes.FpkmController.getFpkmResult",
                    type: "post",
                    data: $("#form").serialize(),
                    success: (data) => {
                        layer.close(index)

                        const $result = $("#result")
                        if (data.valid === "false") {
                            $($result).hide()
                            swal("Error", data.msg, "error")
                        } else {

                            heatmap(data.heatmap)
                            $("#hclust").html(data.hclust)
                            $("#vol").html(data.vol)
                            drawBloxPlot(data.boxPlot.categories,data.boxPlot.values)

                            $($result).show()
                            let target_top = $($result).offset().top ;
                            $("html,body").animate({scrollTop: target_top}, 800);
                        }
                    }
                })
            }

            function getExample() {
                $("#group1").val("Fruit1,Fruit2,Fruit3");
                $("#group2").val("Petiole,Leaf,Root");
            }

            function heatmap(data) {
                Highcharts.chart("heat", {

                    credits: {
                        enabled: false
                    },
                    chart: {
                        zoomType: 'xy',
                        type: 'heatmap',
                        height: 900,
                        marginTop: 65,
                        marginBottom: 170,
                    },
                    plotOptions: {
                        heatmap: {
                            turboThreshold: 0 //不限制数据点个数
                        }
                    },
                    title: {
                        text: null
                    },
                    xAxis: {
                        categories: data[0].treatment,
                        labels: {
                            rotation: -45,
                            style: {
                                fontSize: '12px',
                                fontFamily: 'Arial, sans-serif'
                            }
                        },
                        title: {
                            text: 'Samples'
                        }
                    },
                    yAxis: {
                        labels: {
                            style: {
                                fontSize: '12px',
                                fontFamily: 'Arial, sans-serif'
                            }
                        },
                        categories: data[0].gt,
                        title: "Gene"
                    },
                    colorAxis: {
                        stops: [
                            [0.1, '#78b8ed'],
                            [0.5, '#fffbbc'],
                            [0.8, '#c4463a'],
                            [1, '#c4463a']
                        ],
                        min: data[0].min,
                        max: data[0].max,
//                        minColor: '#FFFFFF',
//                        maxColor: Highcharts.getOptions().colors[0]
                    },
                    legend: {
                        title: {
                            style: {
                                fontWeight: '1',
                                color: '#555',
                                fontSize: '12px'
                            },
                            text: 'coefficient'
                        },
                        align: 'right',
                        layout: 'vertical',
                        marginTop: 0,
                        verticalAlign: 'top',
                        y: 25,
                        symbolHeight: 305
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b>Sample Name(X):</b>' + this.series.xAxis.categories[this.point.x] + '<br>' + '<b>Sample Name(Y):</b>' + this.series.yAxis.categories[this.point.y] + '<br><b>coefficient: ' + this.point.value + '</b>';
                        }
                    },
                    series: [{
                        borderWidth: '0.2',
                        color: '#fefefe',
                        data: data[0].expression,
                        dataLabels: {
                            enabled: false
                        }
                    }]
                });
            }

            function drawBloxPlot(categories, values) {
                Highcharts.chart("box", {
                    chart: {
                        type: 'boxplot',
                        height: 500,
                        marginTop: 40,
                        marginBottom: 80
                    },
                    credits: {
                        enabled: false
                    },
                    title: {
                        text: "Box Plot"
                    },
                    legend: {
                        enabled: false
                    },
                    xAxis: {
                        type: 'category',
                        labels: {

                            style: {
                                fontSize: '9px',
                                fontFamily: 'Arial, sans-serif'
                            }
                        },
                        categories: categories,
                        title: {
                            text: ' '
                        }
                    },
                    yAxis: {
                        title: {
                            text: 'Expression'
                        },
                        min: 0
                    },
                    labels: {
                        style: {
                            color: "black",
                            fontSize: '16px',
                            fontWeight: 'normal'
                        },
                        items: [{
                            html: " ",
                            style: {
                                left: '90px',
                                top: '475px'
                            }
                        }]
                    },
                    exporting: {
                        sourceWidth: 1200,
                        sourceHeight: 800
                    },
                    plotOptions: {

                        series: {
                            colorByPoint: true
                        }
                    },

                    series: [{
                        name: 'Sample',
                        data: values
                    },
                        {
                            name: 'Outlier',
                            color: Highcharts.getOptions().colors[0],
                            type: 'scatter',
                            marker: {
                                fillColor: 'white',
                                lineWidth: 1,
                                lineColor: Highcharts.getOptions().colors[0]
                            },
                            tooltip: {
                                pointFormat: 'RPM: {point.y}'
                            }
                        }]
                });
            }

            function formValidation() {
                $('#form').formValidation({
                    framework: 'bootstrap',
                    icon: {
                        valid: 'fa fa-check',
                        invalid: 'fa fa-remove',
                        validating: 'fa fa-refresh'
                    },
                    fields: {
                        "group1[]": {
                            validators: {
                                notEmpty: {
                                    message: 'This is not be empty!'
                                },
                                callback: {
                                    message: 'Select at least two samples!',
                                    callback: function(value, validator, $field) {
                                        var options =  $("#group1").val();
                                        return options.length >= 2 ;
                                    }
                                }
                            }
                        },
                        "group2[]": {
                            validators: {
                                notEmpty: {
                                    message: 'This is not be empty!'
                                },
                                callback: {
                                    message: 'Select at least two samples!',
                                    callback: function(value, validator, $field) {
                                        var options =  $("#group2").val();
                                        return options.length >= 2 ;
                                    }
                                }
                            }
                        }
                    }
                });
            }

    </script>

}
@plotDiv(id:String) = {
    <div id="@id" style="width: 900px;
        margin: 0 auto;margin-top: 30px">
    </div>
}